<template>
  <div>
    <div class="people"></div>
    <leftLeft style="position: fixed;left:0;top:0;width:100%"></leftLeft>
    <div style="position:absolute;top:0;margin-left: 15%;height: 100vh">
      <div style="margin-left: 0px;margin-top: 100px;font-size: 20px">成员动态</div>
      <div style="left:0;top:130px;position: absolute;width:1080px"><el-divider></el-divider></div>
      <div style="margin-top: 40px">
        <el-row>
          <el-col :span="8">
            <el-date-picker
              v-model="sendForm.date"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-col>

          <el-col :span="7" offset="2">
            <el-select v-model="sendForm.teamID"
                       filterable placeholder="所有团队" style="margin-left: 50px">
              <el-option
                v-for="item in teams"
                :key="item.teamID"
                :label="item.teamName"
                :value="item.teamID">
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="2" offset="1">
            <button style="background-color: #FE4066;
            width: 90px;height: 38px;color: white;
            border-radius: 6px;
            border: none;margin-left: 30px"
            @click="getSelect">筛选</button>
          </el-col>

          <el-col :span="2" offset="1">
          <button style="background-color: white;
            width: 90px;height: 38px;
            color: #FE4066;border-radius: 6px;
            border-color: #FE4066;margin-left: 40px">重置</button>
        </el-col>

        </el-row>
      </div>
      <div style="padding-top: 20px">
        <div class="wrapper">
          <div class="wrapper-content" v-for="item in tableData" :key="item.userID">
            <el-card
              :body-style="{ padding: '0px', marginBottom: '1px' }"
              style="margin-top:30px;margin-left:4%;width: 100%;height: 80px;border-radius: 20px"
            >
              <div>
                <el-row>
                  <el-col :span="5" style="margin-left: 20px;padding-top: 30px;padding-bottom: 30px;">
                    <p>{{item.time}}</p>
                  </el-col>
                  <el-col :span="2">
                    <img :src="item.userPhoto" class="image multi-content" style="width: 54px;height: 54px;border-radius: 50%;margin-top: 14px;"/>
                  </el-col>
                  <el-col :span="5" style="margin-top: 30px">
                    <p>用户{{item.userNickName}}</p>
                  </el-col>
                  <el-col :span="5" style="margin-top: 30px">
                    <p>{{item.action}}{{item.target}}{{item.targetName}}</p>
                  </el-col>
<!--                  <el-button type="text" class="button" @click="gotoDetail(item.projectID)" style="margin-top: 20px">查看详情</el-button>-->
                </el-row>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import leftLeft from '@/components/left/leftLeft.vue'
import teamManageLeft from '@/components/left/teamManageLeft'
export default {
  name: 'msg',
  components: {
    leftLeft,
  },
  created() {
    this.getTeam();
    this.getAll();
  },

  data() {
    return {
      currentPage:1,//当前页码
      pageSize:10,//每页显示条数
      sendForm:{
        date:'0',
        beginTime:'0',
        userID:'',
        teamID:'0',
        endTime:'0'
      },
      teams:[],
      tableData:{
        recordID:'',
        userID:'',
        userNickName:'',
        action:'',
        target:'',
        targetName:'',
        time:'',
        userPhoto:''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  methods:{
    getTeam(){
      this.$axios({
        method: 'get',           /* 指明请求方式，可以是 get 或 post */
        url: '/team',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        params: ({
          userID:this.$store.state.ID,
        })
      })
        .then(res => {              /* res 是 response 的缩写 */
          this.teams=res.data.data
        })
        .catch(err => {
          /* 若出现异常则在终端输出相关信息 */
        })
    },
    getAll(){
      const self = this;
      const formData = new FormData();
      formData.append("startTime", 0);
      formData.append("endTime", 0);
      formData.append("teamID", 0);
      formData.append("userID", this.$store.state.ID);
      self.$axios({
        method:'post',
        url:'/msg/show',
        data: formData,
      }).then(res=>{
        console.log(res.data);
        console.log(res.data.data);
        if(res.data.errno == 0)
          self.tableData=res.data.data[0];
        else
          this.$message.error(res.data.msg);
      })
    },
    getSelect(){
      const self = this;
      const formData = new FormData();
      formData.append("startTime", self.sendForm.date[0]);
      formData.append("endTime", self.sendForm.date[1]);
      formData.append("teamID", self.sendForm.teamID);
      formData.append("userID", self.self.$store.state.ID);
      self.$axios({
        method:'post',
        url:'/msg/show',
        data: formData,
      }).then(res=>{
        console.log(res.data);
        console.log(res.data.data);
        if(res.data.errno == 0)
          self.tableData=res.data.data[0];
        else
          this.$message.error(res.data.msg);
      })
    }
  }
}
</script>

<style scoped>
.people{
  background:url("../../assets/teamAction/back.png") ;
  width:100%;
  height:100%;
  top: 0%;
  z-index: -1;
  position: absolute;
}
.projectimg{
  background:url("../../assets/teamAction/img.png") ;
  width:60px;
  height:40px;

  background-size:100% 100%;
  border-radius: 5px;
}
</style>
